<script setup lang="ts">
import type { VNode } from "vue";
import Grid from "@/components/framework/grid.vue";
import CustomIcon from "@/components/framework/icon";
import type { ComponentType } from "@/framework/vue/types.ts";

defineProps<{
  icon?: VNode | ComponentType | string;
  title?: string;
  titleClass?: string;
  bodyClass?: string;
}>();
</script>

<template>
  <grid row-template="35px 1fr auto">
    <div :class="['flex aic col-gap-10 border-bottom-secondary', titleClass]">
      <slot name="icon">
        <custom-icon v-if="typeof icon === 'string'" :type="icon" class="font-18" />
        <component v-else-if="icon" :is="icon" />
      </slot>
      <slot name="title">
        <span>{{ title }}</span>
      </slot>
      <div class="flex-1"></div>
      <slot name="headerRight" />
    </div>
    <div :class="['flex-auto', bodyClass]">
      <slot />
    </div>

    <slot name="footer">
      <div v-if="$slots.footerLeft || $slots.footerRight" class="flex aic col-gap-10 pv-10">
        <slot name="footerLeft" />
        <div class="flex-1"></div>
        <slot name="footerRight" />
      </div>
    </slot>
  </grid>
</template>

<style scoped lang="less"></style>
